<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <th:block th:replace="~{/_include/header}" />
    <meta name="page-help" content="https://getrebuild.com/docs/admin/transforms" />
    <title>[[${bundle.L('记录转换')}]]</title>
    <style>
      .nav-tabs > li.nav-item a.nav-link {
        padding: 8px 15px;
      }
      .fields-mapping .row > div {
        margin-top: 6px;
        margin-bottom: 6px;
      }
      .fields-mapping span.badge {
        font-size: 1rem;
        padding: 4px 10px;
        font-weight: normal;
        margin-top: 4px;
      }
      .fields-mapping span.badge.req {
        border-left: 3px solid #ea4335;
      }
      .fields-mapping span.badge.readonly {
        border-left: 3px solid #bbb;
      }
      .fields-mapping span.badge::before {
        content: '\f2fd';
        font-family: 'Material-Design-Iconic-Font', serif;
        position: absolute;
        right: 0;
        color: #aaa;
        transform: rotate(180deg);
        font-size: 1.1rem;
        font-weight: bold;
        margin-top: -2px;
      }
      .fields-mapping .row.active span.badge::before {
        color: #fbbc05;
      }
      .fields-mapping .row::after {
        content: ' ';
        height: 1px;
        width: 100%;
        border-bottom: 1px dotted #dee2e6;
        margin-left: 15px;
        margin-right: 15px;
      }
      .fields-mapping .row.title2::after {
        border-bottom: 1px solid #dee2e6;
      }
      #filterFields {
        padding: 5px 26px 15px;
        border-radius: 2px;
        border: 1px solid #eee;
      }
      #filterFields .badge {
        border-radius: 0;
        padding: 3px 10px;
        position: relative;
      }
      #filterFields .badge::after {
        position: absolute;
        width: 0;
        height: 0;
        content: '';
        transform: rotate(45deg);
        border: 4px solid #fff;
        top: -4px;
        right: -4px;
      }
      #filterFields .mdi {
        position: absolute;
        right: -2px;
        font-size: 1.25rem;
        color: #aaa;
        top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="rb-wrapper rb-fixed-sidebar rb-collapsible-sidebar rb-collapsible-sidebar-hide-logo rb-color-header" th:classappend="${sideCollapsedClazz}">
      <th:block th:replace="~{/_include/nav-top}" />
      <th:block th:replace="~{/_include/nav-left-admin(active='robot-transforms')}" />
      <div class="rb-content">
        <div class="page-head">
          <div class="page-head-title">[[${bundle.L('记录转换')}]]<span class="sub-title">[[${name ?: bundle.L('未命名')}]]</span></div>
          <div class="clearfix"></div>
        </div>
        <div class="main-content container-fluid pt-0">
          <div class="card mb-0">
            <div class="card-body">
              <form class="simple">
                <div class="form-group row">
                  <label class="col-md-12 col-xl-3 col-lg-4 col-form-label text-lg-right">[[${bundle.L('附加过滤条件')}]]</label>
                  <div class="col-md-12 col-xl-9 col-lg-8">
                    <a class="btn btn-sm btn-link pl-0 text-left down-2" id="useFilter">[[${bundle.L('点击设置')}]]</a>
                    <p class="form-text mb-0 mt-0">[[${bundle.L('符合过滤条件的记录才允许被转换')}]]</p>
                  </div>
                </div>
                <div class="form-group row">
                  <label class="col-md-12 col-xl-3 col-lg-4 col-form-label text-lg-right">[[${bundle.L('转换字段映射')}]]</label>
                  <div class="col-md-12 col-xl-9 col-lg-8">
                    <ul th:if="${sourceDetailEntity != null}" class="nav nav-tabs mb-2">
                      <li class="nav-item"><a class="nav-link active" href="#EMAIN" data-toggle="tab">[[${bundle.L('主实体')}]]</a></li>
                      <li class="nav-item"><a class="nav-link" href="#EDETAIL" data-toggle="tab">[[${bundle.L('明细实体')}]]</a></li>
                    </ul>
                    <div class="tab-content m-0 p-0 fields-mapping">
                      <div class="tab-pane active" id="EMAIN">
                        <p class="text-muted m-0" style="padding-top: 7px">[[${bundle.L('加载中')}]]</p>
                      </div>
                      <div class="tab-pane" id="EDETAIL"></div>
                    </div>
                  </div>
                </div>
                <div class="form-group row">
                  <label class="col-md-12 col-xl-3 col-lg-4 col-form-label text-lg-right">[[${bundle.L('转换后回填')}]]</label>
                  <div class="col-md-12 col-xl-9 col-lg-8">
                    <div class="col-6 pl-0 pr-0">
                      <select class="form-control form-control-sm" id="fillbackField"></select>
                    </div>
                    <p class="form-text">[[${bundle.L('可将转换后的记录 ID 回填至源记录中')}]]</p>
                  </div>
                </div>
                <div class="form-group row">
                  <label class="col-md-12 col-xl-3 col-lg-4 col-form-label text-lg-right"></label>
                  <div class="col-md-12 col-xl-9 col-lg-8">
                    <label class="custom-control custom-control-sm custom-checkbox custom-control-inline mb-0">
                      <input class="custom-control-input" type="checkbox" id="transformMode" value="2" />
                      <span class="custom-control-label">[[${bundle.L('预览模式')}]] </span>
                    </label>
                    <p class="form-text">[[${bundle.L('打开新建页面而非直接转换，可在新建页面补充信息后再保存')}]]</p>
                  </div>
                </div>
                <th:block th:if="${targetIsDetail}">
                  <div class="form-group row">
                    <label class="col-md-12 col-xl-3 col-lg-4 col-form-label text-lg-right"></label>
                    <div class="col-md-12 col-xl-9 col-lg-8">
                      <label class="custom-control custom-control-sm custom-checkbox custom-control-inline mb-0">
                        <input class="custom-control-input" type="checkbox" id="importsMode" value="2" />
                        <span class="custom-control-label">[[${bundle.L('启用明细记录导入')}]] <sup class="rbv"></sup></span>
                      </label>
                      <p class="form-text">[[${bundle.L('通过此记录转换规则进行明细记录批量导入/添加')}]]</p>
                    </div>
                  </div>
                  <div class="form-group row hide">
                    <label class="col-md-12 col-xl-3 col-lg-4 col-form-label text-lg-right"></label>
                    <div class="col-md-12 col-xl-9 col-lg-8">
                      <h5 class="mt-0 text-bold">[[${bundle.L('明细记录导入条件')}]]</h5>
                      <div id="filterFields" style="max-width: 1000px">HOLD</div>
                    </div>
                  </div>
                </th:block>
                <div class="form-group row footer">
                  <label class="col-md-12 col-xl-3 col-lg-4 col-form-label text-lg-right"></label>
                  <div class="col-md-12 col-xl-9 col-lg-8">
                    <button class="btn btn-primary J_save" type="button">[[${bundle.L('保存')}]]</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <th:block th:replace="~{/_include/footer}" />
    <script>
      window.__PageConfig = {
        configId: '[[${configId}]]',
        config: [(${config ?:'null'})],
        sourceEntity: [(${sourceEntity ?:'null'})],
        sourceDetailEntity: [(${sourceDetailEntity ?:'null'})],
        targetEntity: [(${targetEntity ?:'null'})],
        targetDetailEntity: [(${targetDetailEntity ?:'null'})],
      }
    </script>
    <script th:src="@{/assets/js/metadata/field-valueset.js}" type="text/babel"></script>
    <script th:src="@{/assets/js/rb-advfilter.js}" type="text/babel"></script>
    <script th:src="@{/assets/js/metadata/field-compatible.js}" type="text/babel"></script>
    <script th:src="@{/assets/js/admin/transform-design.js}" type="text/babel"></script>
  </body>
</html>
